<!-- oem配置 -->
<template>
  <div class="oembox">
       <el-form :model="oemset" status-icon label-width="150px" class="demo-dynamic">
        <div class="title">域名配置</div>
        <div class="frombox">
          <el-form-item label="平台域名：">
            <el-input type="text" placeholder="请输入平台域名" v-model.trim="oemset.domain" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div class="title">平台设置</div>
        <div class="frombox">
          <el-form-item label="平台简称：">
            <el-input type="text" placeholder="请输入平台简称：" v-model.trim="oemset.oemName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="slogan：">
            <el-input type="text" placeholder="请输入广告语" v-model.trim="oemset.oemSlogan" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="审核商户权限：">
            <el-radio v-model="oemset.checkMerchant" label="1">开通</el-radio>
            <el-radio v-model="oemset.checkMerchant" label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="通道配置权限：">
            <el-radio v-model="oemset.channelConfigSwitch" label="1">开通</el-radio>
            <el-radio v-model="oemset.channelConfigSwitch" label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="删除商户权限：">
            <el-radio v-model="oemset.delMer" label="1">开通</el-radio>
            <el-radio v-model="oemset.delMer" label="0">关闭</el-radio>
          </el-form-item>
          <el-form-item label="配置菜单：">
              <span class="blue" @click="updata()">选择</span>
          </el-form-item>
          <el-form-item class="photo" label="登录页logo：" >
                <el-upload
                    list-type="picture-card"
                    :action="upload"
                    :headers="token"
                    :show-file-list="false"
                    :on-success="loginlogos"
                >
                    <img
                    style="width:100%;height:100%"
                    v-if="oemset.loginLogo"
                    :src="oemset.loginLogo"
                    class="avatar"
                    >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     <div class="demobox">
                       <img  src="../../assets/img/loginexample.jpg" alt="">
                       <div>参考样例</div>
                     </div>
                </el-upload>
                
            </el-form-item>
            <el-form-item class="photo" label="页面logo：" >
                <el-upload
                    list-type="picture-card"
                    :action="upload"
                    :headers="token"
                    :show-file-list="false"
                    :on-success="indexlogos"
                >
                    <img
                    style="width:100%;height:100%"
                    v-if="oemset.pageLogo"
                    :src="oemset.pageLogo"
                    class="avatar"
                    >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="demobox">
                       <img  src="../../assets/img/pageexample.jpg" alt="">
                       <div>参考样例</div>
                     </div>
                </el-upload>
               
            </el-form-item>
             <el-form-item class="photo" label="台卡背景：" >
                <el-upload
                    list-type="picture-card"
                    :action="upload"
                    :headers="token"
                    :show-file-list="false"
                    :on-success="cardImagelogos"
                >
                    <img
                    style="width:100%;height:100%"
                    v-if="oemset.cardImage"
                    :src="oemset.cardImage"
                    class="avatar"
                    >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="demobox">
                       <img  src="../../assets/img/cardexample.png" alt="">
                       <div>参考样例</div>
                     </div>
                </el-upload>
               
            </el-form-item>
             <el-form-item class="photo" label="技术支持logo图标：" >
                <el-upload
                    list-type="picture-card"
                    :action="upload"
                    :headers="token"
                    :show-file-list="false"
                    :on-success="techsuplogos"
                >
                    <img
                    style="width:100%;height:100%"
                    v-if="oemset.techsupLogo"
                    :src="oemset.techsupLogo"
                    class="avatar"
                    >
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="demobox">
                       <img  src="../../assets/img/zslogo.png" alt="">
                       <div>参考样例</div>
                     </div>
                </el-upload>
               
            </el-form-item>
        </div>
        <div class="btnBox">
            <el-button type="primary" @click="save">保存</el-button>
        </div>
       </el-form>

       <el-dialog v-dialogDrag title="配置菜单" :visible.sync="box" width="45%">
        <el-tree
          :data="permissions"
          default-expand-all
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="[1,2,8,21,30,36]"
          :default-checked-keys="idLists"
          :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="box = false">取消</el-button>
          <el-button @click="getCheckedKeys">确定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { agentoem, getOwnedMenu, oemupdate, oemsave } from "@/api/api";
export default {
  data () {
    return {
        token: { token: sessionStorage.getItem("token") },
        oemset:{
            pageLogo:'',
            loginLogo:'',
            cardImage:'',
            techsup_logo:'',
            delMer:''
        },
        upload: this.$store.state.urlexcel +"/product/v31/api/merchant/uploadfile/common/oem",
        box:false,
        permissions: [],
        idLists:[],
        // functionlist:'',
        idList:'',
        userinfo:'',
        defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },

  components: {},

  computed: {},

  created(){
    this.Serviceinfo =  JSON.parse(sessionStorage.getItem('oemId'))
    console.log(this.Serviceinfo)
    if(this.Serviceinfo.oemId && this.Serviceinfo.oemId != 'null'){
      this.agentoem(this.Serviceinfo.oemId)
    }else {
       this.agentoems()
    }
  },
  methods: {
    agentoem(oemId){ //获取oem配置
        agentoem({
         id:oemId
        }).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            this.permissions = res.data.allMenu
            this.idList = res.data.idList
            // this.functionlist = res.data.idList.join(',')
            this.userinfo = res.data.info
            this.oemset ={
              domain:this.userinfo.domain,
              channelConfigSwitch: this.userinfo.channelConfigSwitch,
              checkMerchant:this.userinfo.checkMerchant,
              loginLogo:this.userinfo.loginLogo,
              cardImage:this.userinfo.cardImage,
              techsupLogo:this.oemset.techsupLogo,
              oemName:this.userinfo.oemName,
              oemSlogan:this.userinfo.oemSlogan,
              pageLogo:this.userinfo.pageLogo,
              delMer: this.userinfo.delMer,
            }
            let array1 = []
            for(var i= 0;i<this.permissions.length;i++){
              array1.push(this.permissions[i].id)
            }
            //临时数组存放
            let tempArray1 = [];//临时数组1
            let tempArray2 = [];//临时数组2
            for(var i=0;i<array1.length;i++){
                tempArray1[array1[i]]=true;//将数array2 中的元素值作为tempArray1 中的键，值为true；
            }
            for(var i=0;i<this.idList.length;i++){
                if(!tempArray1[this.idList[i]]){
                    tempArray2.push(this.idList[i]);//过滤array1 中与array2 相同的元素；
                }
            }
            // console.log(tempArray2)
            this.idLists = tempArray2
            
          }
        });
    },
    agentoems(){ //获取oem配置
        agentoem({
          id:''
        }).then(res => {
          // console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            console.log(res)
            this.permissions = res.data.allMenu
          this.idList = res.data.idList
          // this.functionlist = res.data.idList.join(',')
          let array1 = []
          for(var i= 0;i<this.permissions.length;i++){
            array1.push(this.permissions[i].id)
          }
          //临时数组存放
          let tempArray1 = [];//临时数组1
          let tempArray2 = [];//临时数组2
          for(var i=0;i<array1.length;i++){
              tempArray1[array1[i]]=true;//将数array2 中的元素值作为tempArray1 中的键，值为true；
          }
          for(var i=0;i<this.idList.length;i++){
              if(!tempArray1[this.idList[i]]){
                  tempArray2.push(this.idList[i]);//过滤array1 中与array2 相同的元素；
              }
          }
          // console.log(tempArray2)
          this.idLists = tempArray2
          
          }
        });
    },
    loginlogos(res, file) { //登录logo
     if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.oemset.loginLogo = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    indexlogos(res, file) { //页面logo
     if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.oemset.pageLogo = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    cardImagelogos(res, file) { //页面logo
     if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.oemset.cardImage = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    
    techsuplogos(res, file) { //页面logo
     if(res.code ==405){
            sessionStorage.removeItem("token");
            this.$router.push("/login");
      }else if (res.code == 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
        this.oemset.techsupLogo = res.data.filePath;
      }else{
          this.$message.error(res.message);
      }
    },
    save(){ //修改oem配置
      let that = this;
      console.log(this.oemset)
      if(this.Serviceinfo.oemId && this.Serviceinfo.oemId != 'null'){
        oemupdate({
          id:this.Serviceinfo.oemId,
          agentId:this.Serviceinfo.id,
          oemName:this.oemset.oemName,
          oemSlogan:this.oemset.oemSlogan,
          loginLogo:this.oemset.loginLogo,
          pageLogo:this.oemset.pageLogo,
          cardImage:this.oemset.cardImage,
          techsupLogo:this.oemset.techsupLogo,
          delMer:this.oemset.delMer,
          domain:this.oemset.domain,
          checkMerchant: this.oemset.checkMerchant,
          channelConfigSwitch:this.oemset.channelConfigSwitch,
          // idList: this.functionlist
          }).then(res => {
            // console.log(res);
            if(res.code == 405){
              sessionStorage. removeItem('token')
              this.$router.push('/login');
            }else{
              console.log(res)
               if(res.code != 200){
                this.$message.error(res.message);
              }else{
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                 this.$router.push({
                    path: "/serviceproviders",
                });
                setTimeout(function(){that.$router.go(0)},500)
              }
            }
        });
      }else{
        oemsave({
          agentId:this.Serviceinfo.id,
          oemName:this.oemset.oemName,
          oemSlogan:this.oemset.oemSlogan,
          loginLogo:this.oemset.loginLogo,
          pageLogo:this.oemset.pageLogo,
          cardImage:this.oemset.cardImage,
          techsupLogo:this.oemset.techsupLogo,
          domain:this.oemset.domain,
          delMer:this.oemset.delMer,
          checkMerchant: this.oemset.checkMerchant,
          channelConfigSwitch:this.oemset.channelConfigSwitch,
          // idList: this.functionlist
          }).then(res => {
            // console.log(res);
            if(res.code == 405){
              sessionStorage. removeItem('token')
              this.$router.push('/login');
            }else{
              console.log(res)
              if(res.code != 200){
                this.$message.error(res.message);
              }else{
                this.$message({
                  message: '开通成功',
                  type: 'success'
                });
                 this.$router.push({
                    path: "/serviceproviders",
                });
                setTimeout(function(){that.$router.go(0)},500)
              }
            }
        });
      }
      
    },
     // 打开修改列表
    updata(val){
      this.box = true
      
    },
    // 确定菜单配置
    getCheckedKeys() {
        let list = this.$refs.tree.getCheckedKeys()
        list = list.concat(this.$refs.tree.getHalfCheckedKeys())
        let lists =  list.join(',')
        this.functionlist = lists
        console.log(this.functionlist)
        this.box = false
    },
  }
}

</script>
<style lang='less' scoped>
.oembox{
    background: #fff;
    .title{
        font-weight: 500;
        font-size: 16px;
        padding: 10px 45px;
        border-bottom: 1px solid #EEEEEE;
        position: relative;
        &::before{
            content:' ';
            background: #2E71D9;  
            height: 15px;
            width: 5px;
            position: absolute;
            left: 35px;
            top: 13px;
        }
    }
    .frombox{
        width: 60%;
        padding: 20px;
    }
    .btnBox{
        width: 100%;
        padding-left: 15%;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid #eeeeee;
    }
    .blue{
      color: #2E71D9;
      text-decoration:underline;
    }
    .demobox{
      width: 30%;
      position: absolute;
      top: 10px;
      left: 30%;
      line-height: 20px;
      color: #606266;
      font-size: 13px;
      img{
        width: 80%;
      }
    }
}
</style>